[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import type { Metadata } from "next" import ProductCheckout from "@/components/product-checkout" export const metadata: Metadata = { title: "Apple Store Checkout", description: "Apple-inspired checkout experience", } export default function CheckoutPage() { return (

Apple Store Checkout

) } [V0_FILE]typescriptreact:file="components/price-summary.tsx" isEdit="true" isMerged="true" interface PriceSummaryProps { basePrice: number options: Array<{ name: string; price: number }> totalPrice: number } export default function PriceSummary({ basePrice, options, totalPrice }: PriceSummaryProps) { return (

Base price ${basePrice.toLocaleString()}

{options.map( (option, index) => option.price > 0 && (

{option.name} upgrade +${option.price.toLocaleString()}

), )}

Total ${totalPrice.toLocaleString()}

) } [V0_FILE]typescriptreact:file="components/checkout-form.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Card } from "@/components/ui/card" import { CreditCard, User, MapPin, Lock, CheckCircle } from "lucide-react" interface CheckoutFormProps { totalPrice: number productDetails: { name: string screen: string chip: string memory: string storage: string adapter: string color: string } } export default function CheckoutForm({ totalPrice, productDetails }: CheckoutFormProps) { const [isSubmitting, setIsSubmitting] = useState(false) const [isComplete, setIsComplete] = useState(false) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() setIsSubmitting(true) // Simulate form submission setTimeout(() => { setIsSubmitting(false) setIsComplete(true) }, 1500) } if (isComplete) { return (

Order Confirmed!

Thank you for your purchase. We've sent a confirmation email with your order details.

Product {productDetails.name.replace("MacBook Pro", "MacBook Air")}

Screen {productDetails.screen}

Chip {productDetails.chip}

Memory {productDetails.memory}

Storage {productDetails.storage}

Power Adapter {productDetails.adapter}

Color {productDetails.color}

Total ${totalPrice.toLocaleString()}

) } return (

Checkout

Order Summary

{productDetails.name.replace("MacBook Pro", "MacBook Air")} ${totalPrice.toLocaleString()}

{productDetails.screen} · {productDetails.chip} · {productDetails.color}

Total ${totalPrice.toLocaleString()}

Contact Information

First Name

Last Name

Phone

Shipping Address

Street Address

City

State

ZIP Code

Payment Information

Name on Card

Card Number

Expiration Date

Security Code

Secure checkout

) } [V0_FILE]typescriptreact:file="tailwind.config.js" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="components/sticky-price-footer.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { ChevronUp, ChevronDown } from "lucide-react" import { useState } from "react" interface StickyPriceFooterProps { totalPrice: number basePrice: number options: Array<{ name: string; price: number }> onCheckout: () => void } export default function StickyPriceFooter({ totalPrice, basePrice, options, onCheckout }: StickyPriceFooterProps) { const [showDetails, setShowDetails] = useState(false) return (

{/* Price details panel - shown when expanded */} {showDetails && (

Base price ${basePrice.toLocaleString()}

{options.map( (option, index) => option.price > 0 && (

{option.name} upgrade +${option.price.toLocaleString()}

), )}

)} {/* Main footer with total and checkout button */}

) } [V0_FILE]typescriptreact:file="components/image-carousel.tsx" "use client" import { useState, useEffect } from "react" import Image from "next/image" import { ChevronLeft, ChevronRight } from "lucide-react" import { Button } from "@/components/ui/button" interface ImageCarouselProps { images: string[] alt: string } export default function ImageCarousel({ images, alt }: ImageCarouselProps) { const [currentIndex, setCurrentIndex] = useState(0) // Auto-advance the carousel every 5 seconds useEffect(() => { const interval = setInterval(() => { setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length) }, 5000) return () => clearInterval(interval) }, [images.length]) const goToPrevious = () => { setCurrentIndex((prevIndex) => (prevIndex - 1 + images.length) % images.length) } const goToNext = () => { setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length) } return (

{/* Image */}

{images.map((src, index) => (

))}

{/* Navigation arrows */} {/* Dots indicator */}

{images.map((_, index) => (

) } [V0_FILE]typescriptreact:file="components/product-checkout.tsx" isEdit="true" "use client" import { useState, useEffect } from "react" import { Check } from "lucide-react" import { Card } from "@/components/ui/card" import CheckoutForm from "./checkout-form" import StickyPriceFooter from "./sticky-price-footer" import ImageCarousel from "./image-carousel" const basePrice = 999 // MacBook Air images const macbookImages = [ "/placeholder.svg?height=400&width=400&text=MacBook+Air+Front", "/placeholder.svg?height=400&width=400&text=MacBook+Air+Side", "/placeholder.svg?height=400&width=400&text=MacBook+Air+Open", ] // Screen size options const screenOptions = [ { id: "13inch", name: "13-inch", price: 0 }, { id: "15inch", name: "15-inch", price: 200 }, ] // Chip/processor options const chipOptions = [ { id: "m1", name: "M1 Chip", price: 0 }, { id: "m1pro", name: "M1 Pro Chip", price: 200 }, { id: "m1max", name: "M1 Max Chip", price: 400 }, ] // Memory options const memoryOptions = [ { id: "8gb", name: "8GB unified memory", price: 0 }, { id: "16gb", name: "16GB unified memory", price: 200 }, { id: "32gb", name: "32GB unified memory", price: 400 }, ] // Storage options const storageOptions = [ { id: "128gb", name: "128GB", price: 0 }, { id: "256gb", name: "256GB", price: 200 }, { id: "512gb", name: "512GB", price: 400 }, { id: "1tb", name: "1TB", price: 600 }, ] // Power adapter options const adapterOptions = [ { id: "standard", name: "Standard Power Adapter", price: 0 }, { id: "fast", name: "Fast Charging Power Adapter", price: 79 }, ] // Updated color options const colorOptions = [ { id: "sky-blue", name: "Sky Blue", color: "bg-sky-300" }, { id: "silver", name: "Silver", color: "bg-gray-200" }, { id: "starlight", name: "Starlight", color: "bg-amber-50" }, { id: "midnight", name: "Midnight", color: "bg-slate-900" }, ] export default function ProductCheckout() { const [selectedScreen, setSelectedScreen] = useState(screenOptions[0]) const [selectedChip, setSelectedChip] = useState(chipOptions[0]) const [selectedMemory, setSelectedMemory] = useState(memoryOptions[0]) const [selectedStorage, setSelectedStorage] = useState(storageOptions[0]) const [selectedAdapter, setSelectedAdapter] = useState(adapterOptions[0]) const [selectedColor, setSelectedColor] = useState(colorOptions[0]) const [showCheckoutForm, setShowCheckoutForm] = useState(false) const [showStickyFooter, setShowStickyFooter] = useState(false) // Calculate total price based on all selected options const totalPrice = basePrice + selectedScreen.price + selectedChip.price + selectedMemory.price + selectedStorage.price + selectedAdapter.price // Always show sticky footer when not in checkout useEffect(() => { setShowStickyFooter(!showCheckoutForm) }, [showCheckoutForm]) // Add padding to the bottom of the page to account for the sticky footer useEffect(() => { if (!showCheckoutForm) { document.body.style.paddingBottom = "80px" } else { document.body.style.paddingBottom = "0" } return () => { document.body.style.paddingBottom = "0" } }, [showCheckoutForm]) return ( <>

{/* Left column - Product image and basic details */}

{/* Replace static image with carousel */}

MacBook Air

Impossibly thin. Impressively capable.

• Apple M4 chip with 10-core CPU, 8-core GPU, 16‑core Neural Engine

• 16GB unified memory

• 256GB SSD storage

• 13.6-inch Liquid Retina display with True Tone²

• 12MP Center Stage camera

• MagSafe 3 charging port

• Two Thunderbolt 4 ports

• 30W USB-C Power Adapter

{/* Right column - Options and checkout form */}

{/* Screen Size */}

Screen Size

{screenOptions.map((option) => ( ))}

{/* Chip/Processor */}

Chip

{chipOptions.map((option) => ( ))}

{/* Memory */}

Memory

{memoryOptions.map((option) => ( ))}

{/* Storage */}

Storage

{storageOptions.map((option) => ( ))}

{/* Power Adapter */}

Power Adapter

{adapterOptions.map((option) => ( ))}

{/* Color */}

Color

{colorOptions.map((option) => ( ))}

{/* Removed the "Continue to Checkout" button */} {showCheckoutForm && ( )}

{/* Sticky price footer - always shown when checkout form is not visible */} {!showCheckoutForm && ( { setShowCheckoutForm(true) window.scrollTo({ top: 0, behavior: "smooth" }) }} /> )} ) }

About

Tags

Share

About

Tags

Share

More Templates Like This